<template>
  <div
    v-if="tags.length !== 0"
    class="tags">
    <div
      v-for="(tag, i) in tags"
      :key="i"
      class="tag"
      @click="deleteThis(i)"><div class="tag__text van-ellipsis">{{ tag.label }}</div></div>
  </div>
</template>

<style lang="scss" scoped>
  .tags {
    padding: 8px 16px;
    background-color: #fff;
    border-bottom: 2px solid #eee;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
  }

  .tag {
    padding: 10px;
    border: 2px solid #FA8C01;
    box-sizing: border-box;
    margin: 8px;
    position: relative;
    &::after {
      content: '';
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      top: -10px;
      right: -10px;
      background: url("./assets/delete.png") no-repeat;
      background-size: 100% 100%;
    }
    &__text {
      max-width: 250px;
      font-size: 28px;
      color: #343434;
    }
  }
</style>

<script>
export default {
  model: {
    prop: 'tags',
    event: 'change'
  },
  props: {
    tags: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    deleteThis (i) {
      this.tags.splice(i, 1)
    }
  }
}
</script>
